<template>
  <div class="public">
    <main style="text-align: center">
      <h3>{{ detail.title }}</h3>

      <p>{{ detail.createtime }}</p>

      <div>
        {{ detail.txt }}
      </div>
    </main>

    <footer>评论</footer>

    <el-dialog
      v-model="visiblePay"
      title="确认以下收费信息"
      width="400px"
      custom-class="menuBorder"
    >
      <p style="text-align: center; font-size: 14px">
        支付金额:￥{{ payPrice }}
      </p>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="$router.back()">取消</el-button>
          <el-button type="primary" @click="surePay">确认支付</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
      v-model="visiblePass"
      title="文章受保护，请输入访问密码"
      width="520px"
      custom-class="menuBorder"
    >
      <el-form ref="form">
        <el-form-item label="密码">
          <el-input v-model="pass" type="password"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="$router.back()">回首页</el-button>
          <el-button type="primary" @click="look">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import { apiArticleDetail } from "@/api/article";
import { apiPay } from "@/api/pay";
import { ref, onMounted } from "vue";

const detail = ref({});

const visiblePay = ref(false);

const visiblePass = ref(false);

const pass = ref("");

const payPrice = ref(0);

const route = useRoute();

console.log(route.params);

const { id, type, pay, price, odd, title, password } = route.params;

const surePay = () => {
  apiPay({ id, pay, odd, title }).then((res) => {
    window.location.href = res.url;
  });
};

const look = () => {};

const getDetail = () => {
  if (pay * 1) {
    visiblePay.value = true;
    payPrice.value = price;
  }

  if (password * 1) {
    visiblePass.value = true;
  }

  if (type === "article" && !visiblePay.value) {
    apiArticleDetail({ id }).then((res) => {
      detail.value = res.data;
    });
  }
};

onMounted(() => {
  getDetail();
});
</script>

<style lang="scss" scoped>
@import "../../../style/handle";

main {
  flex: 1;
  margin-top: 10px;
  background: #fff;
  @include background_color("background_color1");
}
</style>
